<template>
    <div>
        <div ref="headAnim" :class="{'head_anim':accountState}">
            <div class="accountCon clearFix" :class="{'accountConEnd':accountState,'accountConBack':backState}">
                <p class="account_num">{{myAccount||'0'}}</p>
                <span class="">账户余额（芸券）</span>
               
                <a style="color: #fff;" @click="$router.push({path:'/getcoupon'})"><i class="iconfont icon-bangzhuyufankui"></i>芸券获得方式</a>
            </div>
            <!-- <div class="end_hg" :class="{'end_hgt':accountState}"></div> -->
            <div class="account_tit clearFix">
                <span class="wd1 "><b>账户明细</b></span>
                <span class="wd2" :class="{'hot':indexTab=='0'}" @click="switchTab('0')">全部</span>
                <span class="wd2" :class="{'hot':indexTab=='1'}" @click="switchTab('1')">收入</span>
                <span class="wd2" :class="{'hot':indexTab=='2'}" @click="switchTab('2')">支出</span>
            </div>
        </div>
        <div class="account_list"
             v-infinite-scroll="moreList"
             infinite-scroll-disabled="loading"
             infinite-scroll-immediate-check = "true"
             infinite-scroll-distance="100" ref="asdList">
            <ul ref="payment_list">
                <li class="writeBox white_bg" v-show="showBox"></li>
                <li  v-for="item in paymentList">
                    <div class="account_list_r">{{item.income | income}}<span class="account_list_num">{{item.totNum}}</span> 芸券</div>
                    <div class="account_list_l">
                        <b>{{ item.channel | paymentTp }}</b>
                        <span class="account_list_span" v-html="item.content"></span>
                        <p class="account_date">{{item.date | endTime}}</p>
                    </div>
                </li>
            </ul>
            <go-top v-show="goTopState" ref="goTopId"></go-top>
            <no-data v-if="noInfo"></no-data>
        </div>
        <div class="loading-box" ref="loadBox" v-show="!noInfo" v-if="moreInfo">
            <list-loading v-on:clickEvent="clickMoreList" :noMoreCoupon="noMoreCoupon"></list-loading>
        </div>
        <div class="lastInfoMore" v-if="!moreInfo" v-show="!noInfo&&paymentList.length>6">没有更多</div>
        <!--<div :style="{height:seatHeight+'px'}"></div>-->
    </div>
</template>
<script>
    import * as types from '../../vuex/types.js'
    import listLoading from '../../componentes/global/listLoading.vue'
    import {mapState} from 'vuex'
    export default {
        data:function(){
            return{
                loading:true,
                noMoreCoupon:true,
                indexTab:'0',
                noInfo:false,
                contHtml:'<p>222222222</p>',
                accountState:false,
                backState:false,
                seatHeight:'0',
                moreInfo:true,
                goTopState:false,
                showBox:false,
            }
        },
        name:"payment",

        components:{
            listLoading
        },
        beforeRouteLeave(to, from, next){
            // 避免返回时未清除定时器
            if (this.$refs.goTopId) {
                this.$refs.goTopId.clear();
            }
            window.removeEventListener('scroll', this.gotopScroll);
            window.removeEventListener('scroll', this.handleScroll);
            next()
        },

        created:function(){
            // 监视滚动
            window.addEventListener('scroll', this.gotopScroll);
            window.addEventListener('scroll', this.handleScroll);
            this.$store.commit(types.GET_PAYMENTLIST);//初始化列表
            this.$store.commit(types.PAYMENT_PAGE,1);//初始化分页
            // this.$store.commit(types.GET_SCORLL_STATUS,true);
            this.$store.dispatch('getAccount');
            this.clickMoreList();
        },
        computed:{
            ...mapState({
                myAccount:state => state.center.myAccount,
                paymentList:state => state.center.paymentList,
                paymentPageLimit:state => state.center.paymentPageLimit,
            })
        },
        methods:{
            gotopScroll(){
                var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
                var scrollHeight=document.documentElement.clientHeight||document.body.scrollTop;
                if (scrollTop>=scrollHeight+50) {
                    this.goTopState = true
                } else {
                    this.goTopState = false
                }
                //回到顶部过程中用户滚动滚动条，停止定时器
                if (scrollTop <= 0) {
                    if (this.$refs.goTopId) {
                        this.$refs.goTopId.clear();
                    }
                }
            },
            switchTab(num){
                this.$store.commit(types.GET_PAYMENTLIST);//初始化列表
                this.$store.commit(types.PAYMENT_PAGE,1);//初始化分页
                this.indexTab = num;
                this.noMoreCoupon = true;
                this.moreInfo=true;
                this.clickMoreList();
            },
            clickMoreList:function(){
                if(!this.noMoreCoupon){//防止重复点击
                    return
                }
                let me = this;
                this.noMoreCoupon = false;
                this.$store.dispatch('getPaymentList',{method:'post',data:{"type":me.indexTab}}).then(function(rep){
                    if(rep.content.total<=0){
                        me.noInfo=true;
                    }else{
                        me.noInfo=false;
                    }

                    if(rep.content.list){
                        // console.log(me.paymentList)
                        if(rep.content.list.length < me.paymentPageLimit){
                            me.moreInfo=false;
                            // me.seatHeight=me.seatHeight+loadHeight;
                            setTimeout(function(){me.noMoreCoupon = true;},300);
                        }
                        if(rep.content.list.length == me.paymentPageLimit){//如果列表数据够10条，开启下拉加载
                            me.moreInfo=true;
                            me.loading = false;
                            me.noMoreCoupon = false;

                        }

                    }else{

                        setTimeout(function(){me.noMoreCoupon = true;},300);
                    }
                }).catch(function(rep){
                    setTimeout(function(){me.noMoreCoupon = true;},300);
                });
            },
            moreList:function(){
                this.loading = true;
                this.noMoreCoupon = true;
                this.clickMoreList();
            },
            //监听滚动事件
            handleScroll() {
                var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
                if (scrollTop>=200) {
                    let ulHeight = this.$refs.payment_list.clientHeight;
                    this.$refs.payment_list.height=ulHeight+500;
                    this.showBox = true;
                    this.accountState=true;
                    this.backState=false;

                } else {
                    if (this.accountState) {
                        this.showBox = false;
                        this.backState=true;
                        this.accountState=false;
                    }
                }

            },
        }
    }
</script>
<style scoped>
/*.accountCon{
    background: linear-gradient(to top right, #ec4e8a, #f95a7c);
    color:#fff;
    height: 11rem;
    position: relative;
    transition: all 0.5s;
}
.accountCon span{
    position: absolute;
    left: 50%;
    margin-left: -1rem;
    font-weight: bold;
    text-align: center;
    display: block;
    bottom:3.5rem;
}
.accountCon p{
    position: absolute;
    left: 50%;
    text-align: center;
    font-size: 2.6rem;
    margin-left: -2.916rem;
    top:3.5rem;
}
.accountConEnd{
    height: 4.06rem;
    line-height: 4.06rem;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99;
}
.accountConEnd span{
    font-weight: bold;
    float: left;
    margin-left:0;
    left:0.667rem;
    bottom:0;
}
.accountConEnd p{
    float: right;
    margin-left:0;
    padding-top: 0;
    font-size: 2rem;
    left:auto;
    right:0.667rem;
    top:0;
}*/
.head_anim{
    width: 100%;
    position: fixed;
    left: 0;
    top:0;
    z-index: 99;
}
.accountCon{
    background: linear-gradient(to top right, #ec4e8a, #f95a7c);
    color:#fff;
    height: 11rem;
    position: relative;
    /*animation: myBack 1s;
    animation-fill-mode: forwards;*/
}
.accountCon span{
    position: absolute;
    left: 40%;
    bottom:3.5rem;
    margin-left: -1rem;
    /*animation: backSpan 1s;
    animation-fill-mode: forwards;*/
}
.accountCon a{
	position: absolute;
    left: 40%;
    bottom:1.5rem;
    margin-left: -1rem;

}
.accountCon p{
    position: absolute;
    font-size: 2.6rem;
    right:50%;
    top:3.2rem;
    /*margin-right: -2.916rem;*/
    transform: translateX(50%);
    /*animation: backP 1s;
    animation-fill-mode: forwards;*/
}
/*滚动下去状态*/
.accountConEnd{
    animation: mymove 0.8s;
    animation-fill-mode: forwards;
}
.accountConEnd span{
    animation: moveSpan 0.8s;
    animation-fill-mode: forwards;
}
.accountConEnd p{
    animation: moveP 0.8s;
    animation-fill-mode: forwards;
}
.accountConEnd a{
    animation: movea 0.8s;
    animation-fill-mode: forwards;
}
/*滚动回去状态*/
.accountConBack{
    animation: myBack 0.8s;
    animation-fill-mode: forwards;
}
.accountConBack span{
    animation: backSpan 0.8s;
    animation-fill-mode: forwards;
}
.accountConBack p{
    animation: backP 0.8s;
    animation-fill-mode: forwards;
}
.accountConBack a{
    animation: backa 0.8s;
    animation-fill-mode: forwards;
}
.end_hg{height: 0;transition: all 0.8s}
.end_hgt{height: 5rem;transition: all 0.8s}
/*.accountCon .account_num{font-size: 2rem}*/
.account_tit{background: #f5f5f5;line-height: 3.36rem;padding: 0 .667rem;overflow:hidden;}
.account_tit span{float: left;text-align: right;}
.account_tit .wd1{width:31%;text-align: left;color:#333;}
.account_tit .wd2{width:23%;color:#666;font-size: 1rem;}
.account_tit .hot{color:#EC4E8A;}
.account_list_span{color:#666;}
.account_list{background: #f5f5f5;}
.account_list_r{float: right;line-height: 4rem;font-size: 1rem;}
.account_list li{border-bottom:1px solid #f0f0f0;border-top:1px solid #f0f0f0;min-height: 4rem;overflow:hidden;padding: 0 .667rem;font-size: .9rem; overflow: hidden;margin-top: .1rem;}
.account_date{font-size:.8rem;color:#666;margin-top: 0.4rem}
.account_list_num{font-size:1.2rem;}
.account_list_l{padding: .72rem 0 0 0;}
.account_list_l b{margin-right: 0.3rem}
/*动画*/
@keyframes mymove{
    0% {
        height: 11rem;
    }
    100%{
        height: 4.06rem;
        line-height: 4.06rem;
    }
}
@keyframes moveP{
    0% {
        font-size: 2.6rem;
        right:50%;
        top:3.2rem;
        /*margin-right: -2.916rem;*/
        transform: translateX(50%);
    }
    100%{
        font-size: 2rem;
        right:0.667rem;
        top:0;
        margin-right:0;
        transform: translateX(0%);
    }
}
@keyframes moveSpan{
    0% {
        left: 40%;
        bottom:3.5rem;
        margin-left: -1rem;
    }
    100%{
        left: 0.667rem;
        bottom:1rem;
        margin-left:0;
    }
}
@keyframes movea{
    0% {
        left: 41%;
        bottom:3.5rem;
        margin-left: -1rem;
    }
    100%{
        left: 0.667rem;
        bottom:-1rem;
        margin-left:0;
    }
}
/*动画返回*/
@keyframes myBack{
    0% {
        height: 4.06rem;
        line-height: 4.06rem;
    }
    100%{
        height: 11rem;
    }
}
@keyframes backP{
    0%{
        font-size: 2rem;
        right:0.667rem;
        top:0;
        margin-right:0;
        transform: translateX(0%);
    }
    100% {
        font-size: 2.6rem;
        right:50%;
        top:3.2rem;
        /*margin-right: -2.916rem;*/
        transform: translateX(50%);
    }
}
@keyframes backSpan{
    0%{
        left: 0.667rem;
        bottom:0;
        margin-left:0;
    }
    100% {
        left: 40%;
        bottom:3.5rem;
        margin-left: -1rem;
    }
}
@keyframes backa{
    0%{
        left: 0.667rem;
        bottom:0;
        margin-left:0;
    }
    100% {
        left: 40%;
        bottom:1.5rem;
        margin-left: -1rem;
    }
}
.loading-box{overflow:hidden;}
.writeBox{height:18rem;width:100%;}

</style>
